<template>
	<view>
		<!-- <view class="top">
			本场考试共<text>{{dataList.length}}</text>道题，总分<text>{{agreeScore.totalScore}}</text>,
			及格分数为<text>{{agreeScore.passScore}}</text>
		</view> -->
		<view class="title-view" style="padding-bottom: 15rpx;">
			<!-- 居中标题 -->
			<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
				<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
				<text class="gui-primary-color gui-h6 title1-margin gui-title-text" v-if="dataObj.params&&dataObj.params.examRes">{{dataObj.params.examRes.title}}</text>
				<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
			</view>
		</view>
		<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}" v-if="!noData">
			<!-- 轮播项目数量对应 上面的选项标签 -->
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<!-- 使用滚动区域来实现主体内容区域 -->
				<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true">
					<view class="problem-list">
						<view class="problem-item">
							<view class="problem-title flex">
								<text>{{item.index}}.</text>
								<text>{{item.problem}}？</text>
								<view class="status cfff"
									:style="{'background':getType(item.topicType,'color')}">
									{{getType(item.topicType,'text')}}</view>
							</view>
							<view class="option-list flex-ac-wrap">
								<view class="option-item flex-ac"
									v-for="(opItem,opIdx) in item.options">
									<text>{{opItem.option}}.</text>
									<text class="flex1">{{opItem.content}}</text>
								</view>
							</view>
							<view class="answer flex-ac">
								<view class="answer-item">
									<text>正确答案：</text>
									<text>{{item.correctAnswer}}</text>
								</view>
								<view class="answer-item">
									<text>学员选择：</text>
									<text>{{item.answer}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="tools" v-if="!noData">
			<!-- <view class="progress">
				<text>当前 {{currentIndex+1}}/{{dataList.length}}</text>
				<gui-progress :percent="progress" activeColor="#ffa60e"></gui-progress>
			</view> -->
			<view class="tool">
				<view class="btn" @tap="backPage">上一题</view>
				<view class="btn" @tap="nextPage">下一题</view>
				<view class="btn" @tap="allPage">答题卡</view>
				<view class="btn" @tap="handleSubmit">交卷</view>
			</view>
		</view>
		<gui-empty v-if="noData">
			<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
				<!-- 请根据您的项目要求制作并更换为空图片 -->
				<image class="gui-empty-img" src="@/static/noImg.png" mode="widthFix"></image>
			</view>
			<text slot="text" class="gui-text gui-block-text gui-text-center gui-margin-top"
				style="color:#666;padding: 0 100rpx;">暂无数据！</text>
		</gui-empty>
		<!-- 底部弹出 答题卡 -->
		<gui-popup ref="guipopup3" position="bottom">
			<view class="gui-relative gui-box-shadow">
				<view class="box">
					<scroll-view scroll-y="true" class="box-scroll">
						<view class="box-list">
							<view class="box-item" v-for="(item,index) in questions" :key="index">
								<view>{{numType[index]}}、{{item.title}}</view>
								<view class="box-options flex-ac-wrap">
									
									<view class="item flex-ac-jc" :class="item2.correct?'isCheck':'isError'"
									 v-for="(item2,index2) in item.questions" :key="item.id" @tap="goPage(item2.index)">
										{{item2.index}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- iphone 底部操作按钮躲避 -->
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
		</gui-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				did: '', //培训id
				userId:'',
				dataObj: {},
				questions: [],
				dataList: [], //问题
				numType:['一','二','三'],
				currentIndex: 0, // 选中选项的 索引
				mainHeight: 400, // 核心区域高度 
				noData:false
			}
		},
		computed:{
			progress(){
				return parseInt(((this.currentIndex+1) / this.dataList.length) * 100)
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.userId = options.userId || ''
			this.optionDisabled = options.op == 'look' ? true : false
			if (this.did) {
				this.loadDetail()
			}
		},
		methods: {
			loadDetail() {
				this.$http.get(`/training/examRes/list`, {
					userId: this.userId,
					planId:this.did
				}).then(res => {
					if (res.code == 200) {
						let result = res.rows
						console.log('rows', result);
						this.dataObj = result.length?result[0]:{};
						this.noData = result.length?false:true
						if(result.length){
							let num = 1
							let list = this.dataObj?.params?.examRes?.questions_map
							list.forEach((item,index)=>{
								let obj = {
									title:item.title,
									parentIndex:index,
									questions:[]
								}
								item.questions.forEach((item2,index2)=>{
									item2.index=num
									item2.parentIndex=index
									this.dataList.push(item2)
									obj.questions.push(item2)
									num++;
								})
								this.questions.push(obj)
							})
							console.log('this.dataObj', this.dataObj);
							console.log('this.questions', this.questions);
							console.log('this.dataList', this.dataList);
						}
						
					}
				})
			},
			backPage() {
				this.currentIndex = this.currentIndex != 0 ? this.currentIndex - 1 : this.currentIndex
			},
			nextPage() {
				this.currentIndex = this.currentIndex != this.dataList.length - 1 ? this.currentIndex + 1 : this.dataList
					.length - 1
			},
			allPage() {
				this.$refs.guipopup3.open();
			},
			goPage(idx) {
				this.$refs.guipopup3.close();
				this.currentIndex = idx-1
			},
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			getType(status, type) {
				//退款的流程 1.申请退款 2.已同意退款 3.退货中 4.已退货 5.已完成 6.拒绝
				let textStatus = ''
				let color = ''
				switch (status) {
					case 'Single': 
						textStatus = '单选'
						color = '#32CD32'
						break;
					case 'Multi':
						textStatus = '多选'
						color = '#2979ff'
						break;
					case 'Judge':
						textStatus = '判断'
						color = '#FF0000'
						break;
					default:
						break;
				}
				return type == 'text' ? textStatus : color
			},
		}
	}
</script>
<style lang="less">
	page {
		background: #FFFFFF;
	}

	.top {
		padding: 80rpx 0 0 0;
		text-align: center;

		text {
			color: #2979ff;
			padding: 0 4rpx;
			font-size: 30rpx;
		}
	}

	.problem-item {
		padding: 50rpx 30rpx 30rpx 40rpx;
	
		.problem-title {
			.status {
				padding: 4rpx 14rpx;
				border-radius: 20rpx 0 20rpx 0;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	
		.option-list {
			padding: 30rpx 0 0 30rpx;
	
			.option-item {
				width: 50%;
				margin-bottom: 20rpx;
			}
		}
	
		.answer {
			margin-top: 50rpx;
			.answer-item{
				margin-right: 80rpx;
			}
		}
	}
	.tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.progress {
			width: 500rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			text-align: center;
			color: #2979ff;

			text {
				line-height: 60rpx;
			}
		}

		.tool {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background: #2979ff;
			color: #FFFFFF;

			.btn {
				color: #2979ff;
				margin-right: 20rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				height: 45rpx;
				width: 120rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.box {
		background: #FFFFFF;
		padding: 30rpx;

		.box-scroll {
			height: 650rpx;

			.box-list {
				.box-item {
					margin-bottom: 40rpx;
					.box-options{
						.item{
							width: 70rpx;
							height: 70rpx;
							border: 1px solid #eee;
							border-radius: 6rpx;
							margin-top: 25rpx;
							margin-right: 25rpx;
						}
						.isCheck{
							background: #567722;
							color: #FFFFFF;
						}
						.isError{
							background: #BD3124;
							color: #FFFFFF;
						}
					}
				}
			}

		}
	}
</style>